<template>
    <span>
        <el-row>
            <el-col :span="8"   v-for="item in list" :key="key">

                <el-card   class="box-card">
                        <div   slot="header" class=" clearfix">
                            <span>{{item.title}}</span>
                            <el-button @click="editConfig(item.key)" style="float: right; padding: 3px 0" type="text">编辑</el-button>
                        </div>
                        <div class="text item" v-html="item.content">
                        </div>
                </el-card>
            </el-col>
        </el-row>

        <el-dialog  custom-class="dialog"  :title="dialogTitle" :width="dialogWidth" :before-close="dialogConfirmClose" top="7vh" :visible.sync="dialogVisible">
            <router-view name="dialog" @title="setDialogTitle"  @change="dialogClose" @back="dialogClose"></router-view>
        </el-dialog>

    </span>
</template>
<script>
    export default {
        data() {
            return {
                key:null,
                list:{},
                dialogConfirmCancel:false,//锁定后,关闭要弹出确认
                dialogVisible: false,
                dialogTitle:'',
                dialogWidth:'40%',
            }
        },
        beforeRouteUpdate (to, from, next) {
            if (to.matched.some(record => record.meta.dialog)) {
                this.dialogVisible=true;
            }
            next();
        },
        created(){
            this.$http.get('/system/config')
            .then((data)=>{
               console.log(data);
               if(data.data.status==1){
                    this.list=data.data.data;
               }else{
                    this.$message.error('参数解析错误');
               }
            }).catch((e)=>{
                this.$message.error('获取错误失败');
            })
        },
        methods:{
            editConfig:function (action) {
                this.$router.push({path:'/config/edit/config.'+action+'/'+action})
            },
            dialogConfirmClose:function(done){
                if(this.dialogConfirmCancel) {
                    this.$confirm('是否放弃编辑内容？')
                        .then(_ => {
                            this.$router.go(-1);
                            done();
                        }).catch(_ => {});
                }else{
                    this.$router.go(-1);
                    done();
                }
            },
            dialogClose:function(){
                this.dialogVisible=false;
                this.$router.go(-1);
            },
            setDialogTitle:function(title){
                this.dialogTitle=title;
            }
        }
    }
</script>
<style scoped>
    .card{
        cursor:pointer;
    }
    .text {
        font-size: 14px;
    }
    .item {
        padding: 0px 0;
    }
    .box-card {
        margin:10px;
        height:200px;
        overflow: auto;
    }
</style>
